<template>
	<view
		class="diy-window"
		:style="{ 
			background: itemData?.style?.background,
			padding: stylePadding
		}">
			<view class="data-list" v-if="itemData?.style?.layout > -1" :class="'column__' + itemData.style.layout">
				<view 
					class="item"
					:key="index" v-for="(item, index) in itemData.data"
					:style="{ width: `calc(${100 / itemData.style.layout}% - ${16*(itemData.style.layout - 1) / itemData.style.layout}rpx)`}"
					@click="gotoPages(item)">
					<aspect-ratio :ratio="1">
						<view class="img-box">
							<image class="img-box-url" :src="item.imgUrl" mode="aspectFill"></image>
						</view>
					</aspect-ratio>
				</view>
			</view>
			<view v-else>
				<aspect-ratio :ratio="0.5">
				<view class="display">
					<view
						class="img-box-wrap-1">
						<view class="img-box" @click="gotoPages(itemData?.data[0])">
							<image class="img-box-url" :src="itemData?.data[0].imgUrl" mode="aspectFill"></image>
						</view>
					</view>
					<view class="img-box-wrap-1 img-box-wrap-column" v-if="itemData.data.length > 1">
							<view
								class="img-box-wrap-2">
								<view class="img-box" @click="gotoPages(itemData?.data[1])">
									<image class="img-box-url" :src="itemData?.data[1]?.imgUrl" mode="aspectFill"></image>
								</view>
							</view>
							<view
								class="img-box-wrap-2 main-flex"
								v-if="itemData.data.length > 2">
								<view
									class="img-box-wrap-3">
									<view class="img-box" @click="gotoPages(itemData?.data[2])">
										<image class="img-box-url" :src="itemData.data[2].imgUrl" mode="aspectFill"></image>
									</view>
								</view>
								<view
									class="img-box-wrap-3"
									v-if="itemData.data.length > 3">
									<view class="img-box" @click="gotoPages(itemData?.data[3])">
										<image class="img-box-url" :src="itemData.data[3].imgUrl" mode="aspectFill"></image>
									</view>
								</view>
							</view>
					</view>
				</view>
			</aspect-ratio>
		</view>
	</view>
</template>

<script>

export default {
	data() {
		return {};
	},
	props: ['itemData'],
	computed: {
		stylePadding() {
			return this?.itemData?.style?.paddingTop + 'px ' + this?.itemData?.style?.paddingLeft + 'px'
		}
	},
	methods: {
		/*跳转页面*/
		gotoPages(e){
			this.gotoPage(e?.name)
		}
	}
};
</script>

<style>
	
	.diy-window{
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.1);
		font-size: 0;
	}
	
	.diy-window .data-list {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;
	}
	.diy-window image{
		width: 100%;
		height: 100%;
	}
	.img-box {
		width: 100%;
		height: 100%;
	}
	.diy-window .display {
		width: 100%;
		height: 100%;
		display: flex;
	}
	.diy-window .display .img-box-wrap-1 {
		flex: 1;
		box-sizing: border-box;
	}
	.img-box-wrap-column {
		display: flex;
		flex-direction: column;
	}
	.diy-window .display .img-box-wrap-1 + .img-box-wrap-1{
		margin-left: 16rpx;
	}
	.diy-window .display .img-box-wrap-2 {
		flex: 1;
		box-sizing: border-box;
	}
	.diy-window .display .img-box-wrap-2 + .img-box-wrap-2 {
		margin-top: 16rpx;
	}
	.diy-window .display .img-box-wrap-3 {
		height: 100%;
		flex: 1;
		box-sizing: border-box;
	}
	.diy-window .display .img-box-wrap-3 + .img-box-wrap-3 {
		margin-left: 16rpx;
	}
</style>
